﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>商品详情页</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="./css/Reset.css">
    <link href="css/swiper.min.css" rel="stylesheet" />
    <style type="text/css">
        /*标题*/
        .pan1 {
            display: none;
            width: 100%;
            height: 1rem;
            line-height: 1rem;
            padding: 0 0.3rem;
            text-align: center;
            position: fixed;
            top: 0;
            background-color: #fff;
            box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }

        .pan1 a {
            float: left;
        }

        .pan1 img {
            vertical-align: middle;
        }

        /*立即兑换*/
        .submit_btn,
        .submit_btn1, .num_btn {
            text-align: center;
            line-height: 0.88rem;
            width: 85%;
            height: 0.88rem;
            border-radius: 0.44rem;
            font-size: 0.45rem;
            font-weight: initial;
        }
        .num_btn{
            display: inline-block;
           background-color:  #CCCCCC;
           color: #999999;
        }
        .submit_btn {
            color: #f2f0f0;
            display: inline-block;
            background: -webkit-linear-gradient(left, #ff9e4b, #f55f07);
            background: -o-linear-gradient(right #ff9e4b, #f55f07);
            /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(right, #ff9e4b, #f55f07);
            /* Firefox 3.6 - 15 */
            background: linear-gradient(to right, #ff9e4b, #f55f07);
            /* 标准的语法 */
        }

        .submit_btn1 {
            display: none;
            background: #CCCCCC;
            color: #999999;
        }

        #po {
            position: fixed;
            width: 100%;
            height: 1.1rem;
            bottom: 0;
            background-color: white;
            text-align: center;
            line-height: 1.5rem;
        }

        /*弹出层DIV*/
        .alert_info {
            display: none;
        }

        .black_overlay {
            position: fixed;
            bottom: 1.3rem;
            /* top: 0; */
            left: 0%;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 1);
            opacity: 0.6;
            z-index: 101;
        }

        .alert_info1 {
            display: none;
        }

        /*弹出层*/
        .white_content {
            position: fixed;
            bottom: 1.3rem;
            left: 0%;
            width: 100%;
            height: 8.2rem;
            background-color: white;
            overflow: hidden;
            z-index: 102;
        }

        /*第二个弹出层*/

        .xuqiu {
            position: fixed;
            bottom: 1.3rem;
            left: 0%;
            width: 100%;
            height: 6.8rem;
            background-color: white;
            overflow: auto;
            z-index: 200;
        }

        /*弹出层里按钮的样式*/
        .btn input {
            width: 1.3rem;
            height: 0.55rem;
            border-radius: 0.25rem;
            border: 0;
            font-size: 0.28rem;
            background: rgba(246, 246, 246, 1);
            color: #545454;
        }

        /*轮播指标*/
        .div1 {
            width: 88px;
            height: 40px;
            background: rgba(0, 0, 0, 1);
            opacity: 0.3;
            border-radius: 20px;
            text-align: center;
            position: absolute;
            top: 3.3rem;
            left: 87%;
            z-index: 101;
        }

        .div2 {
            width: 40px;
            height: 25px;
            font-size: 26px;
            font-weight: normal;
            color: rgba(255, 255, 255, 1);
            line-height: 40px;
        }

        .div3 {
            width: 100%;
            height: 2.6rem;
            padding-left: 0.3rem;
            padding-top: 0.43rem;
        }

        /*轮播下面字体*/
        .P1 {
            font-size: 0.42rem;
            color: rgba(51, 51, 51, 1);
        }

        .P3 {
            color: rgba(153, 153, 153, 1);
        }

        /*弹窗需要支付的图片样式*/
        .img1 {
            margin-top: 0.8rem;

        }

        .P5 span {
            text-align: center;

            font-size: 0.56rem;
            color: rgba(255, 124, 53, 1);
        }

        .P5 {
            margin-top: 0.4rem;

        }

        .btn1>span {
            display: inline-block;
            padding: 0.12rem 0.39rem;
            background: rgba(246, 246, 246, 1);
            border-radius: 0.25rem;
            margin-right: 0.3rem;
            margin-bottom: 0.3rem;
            font-size: 0.28rem;
        }

        .btn1>span:first-child {
            margin-left: 0;
        }

        .btn1>span.active {
            color: rgba(255, 255, 255, 1);
            background: rgba(255, 124, 53, 1);
        }

        .swiper-container {}

        .swiper-wrapper img {
            width: 100%;

        }

        .item {
            position: absolute;
            bottom: 0.3rem;
            right: 0.3rem;
            z-index: 2;
            width: 0.88rem;
            height: 0.4rem;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 0.2rem;
            text-align: center;
            line-height: 0.4rem;
            color: #fff;
        }

        .P1,
        .P2 {
            margin-bottom: 0.32rem;
        }

        .P4 {
            height: 1.5rem;
            line-height: 1.5rem;
            text-align: center;
        }

        .P4>span {
            color: #999999;
            font-size: 0.28rem;
            position: relative;
        }

        .P4>span::after,
        .P4>span::before {
            content: '';
            display: inline-block;
            position: absolute;
            width: 0.5rem;
            height: 0.01rem;
            background: rgba(224, 224, 224, 1);
            top: 50%;
        }

        .P4>span::after {
            left: -1.12rem;
        }

        .P4>span::before {
            right: -1.12rem;
        }

        .c_body {
            padding: 0 0.01rem;
            padding-bottom: 1.3rem;
        }

        .c_body img {
            margin-bottom: 0.5rem;
        }

        .white_content {
            padding: 0.3rem;
        }

        .specifications>div {
            display: inline-block
        }

        .ale_top {
            width: 100%;
            padding-bottom: 0.3rem;
            border-bottom: 1px solid #F6F6F6;
        }

        .sw_left_click {
            position: absolute;
            top: 0.3rem;
            left: 0.3rem;
            z-index: 3;
        }
        .pan1>a>img{
            width: 0.2rem;
        }
        .address {
            font-size: 0.36rem;
            color: #333333;
            position: relative;
            display: block;
        }

        .address .info {
            width: 0.22rem;
        }

        .arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
        }

        .xuqiu .txt1 {
            position: absolute;
            top: 0.2rem;
            right: 0.3rem;
        }

        .arrow img {
            width: 0.14rem;
        }
        .addAddress p{
            color: #FF7C35;
            font-size: 0.36rem;
        }
        .addAddress img:first-of-type{
            width: 0.44rem;
            vertical-align: sub;
        }
        .addAddress img:last-of-type{
            float: right;
            width: 0.14rem;
        }
        .address{
            display: none;
        }
        .tankuang{width: 5.7rem;min-height: 2.86rem;background: #ffffff;position: fixed;left: 0.9rem;top: 4rem;z-index: 100;border-radius: 0.1rem;display: none;}
        .zhezhao{width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 99;background: rgba(0,0,0,0.5);display: none;}
        .tankuang .tip,.tankuang p{text-align: center;height: 1rem;line-height: 1rem;font-size: 0.34rem;color: #666666}
        .t{display: flex;border-top: 1px solid #eeeeee}
        .cancel,.ok{flex: 1;text-align: center;height: 0.9rem;line-height: 0.9rem}
        .cancel{border-right: 1px solid #eeeeee}
    </style>
</head>

<body>
    <div>
        <!--标题-->
        <div class="pan1">
            <a href="BlingShoping.html"><img src="./images/back.png" alt=""></a>
            <img src="" style="width:0.66rem;height:0.66rem;" />
        </div>
        <!--轮播-->
        <div class="swiper-container">
            <div class="sw_left_click">
                <a href="BlingShoping.html"><img src="./images/Return.png" alt=""></a>
            </div>
            <div class="swiper-wrapper">
                <!-- <div class="swiper-slide"><img src="./images/1.png" alt="" style="width:100%"/></div>
                <div class="swiper-slide"><img src="./images/2.png" alt="" style="width:100%"/></div>
                <div class="swiper-slide"><img src="./images/3.png" alt="" style="width:100%"/></div> -->
            </div>
            <div class="item"><span>1</span>/<span></span></div>
        </div>
        <div class="div3">
            <p class="P1"></p>
            <p class="P2">
                <span class="price" style="color:#FF7C35;font-size:0.42rem;"></span>
                <span style="color:#333333; font-size:0.3rem;">币</span>
            </p>
            <p class="P3" style="font-size:0.28rem;color:#999999;">当前市价：<span></span>元</p>
        </div>
        <div style="width:100%;height:0.14rem;background-color:#F6F6F6;border:0rem solid;"></div>
        <div class="c_body">
            <p class="P4"><span>商品详情</span></p>
            <div>

            </div>
        </div>
        <div style="height:1.3rem; " id="po">
            <div class="submit_btn">
                立即兑换
            </div>
            <div class="submit_btn1">
                已兑完
            </div>
        </div>
        <!--弹出层时背景层DIV-->
        <div class="alert_info">
            <div id="fade" class="black_overlay">
            </div>
            <div id="MyDiv" class="white_content">
                <!--选择规格div-->
                <div style="cursor: default; width:100%; height:100%; background-color:white;" id="move">
                    <div class="ale_top">
                        <div>
                            <div class="specifications">
                                <img src="images/2.png" style="width:1.6rem;height:1.6rem;vertical-align: bottom;" />
                                <div class="">
                                    <p style="margin-bottom: 0.2rem;">
                                        <span class="price" style="font-size:0.42rem; color:#FF7C35;">10</span>
                                        <span style="font-size:0.26rem; color:#333333;">币</span>
                                    </p>
                                    <p style="font-size:0.28rem;color:#666666;margin-bottom: 0.2rem;">库存<span class="stock">10</span>件</p>
                                    <p style="font-size:0.28rem;color:#666666;">已选：“<span class="color">黑色</span>”</p>
                                </div>
                                <span class="txt1" style="float:right;">
                                    <img src="images/close.png" />
                                </span>
                            </div>
                        </div>
                    </div>
                    <div style="width:100%;">
                        <div>
                            <p class="txt1" style="font-size: 0.4rem;font-weight:normal;
                            color:rgba(51,51,51,1); margin-top:0.3rem;">选择规格</p>
                            <br />
                        </div>
                        <div class="btn1" style="margin-top:0.1rem;">

                        </div>
                    </div>

                    <div style="width:100%;height:0.02rem;background-color:rgba(246,246,246,1);margin-top:0.15rem;"></div>
                    <p style="font-size:0.4rem;color:rgba(51,51,51,1); margin:0.5rem 0;">配送地址</p>
                    <a href="ReceivingAddress.html" class="address">
                      
                    </a>
                    <a href="addNewAddress.html?start=1" class="addAddress">
                        <p><img src="./images/add@2x.png" alt="">  添加收货地址<img src="./images/join.png"></p>
                    </a>
                    <div style="width:100%;height:0.02rem;background-color:rgba(246,246,246,1);margin-top:0.5rem;"></div>
                </div>
            </div>
        </div>
        <div class="alert_info1">
            <div id="fade" class="black_overlay">
            </div>
            <div class="xuqiu">
                <!--需要支付div界面-->
                <div style="cursor: default; width:100%; height:100%; background-color:white; overflow: hidden;" class="zhifu">
                    <div style="height:1rem;line-height:1rem; text-align:center;overflow: hidden;">
                        <span class="txt" style="font-size: 0.36rem;">需要支付</span>
                        <span class="txt1">
                            <img src="images/close.png" />
                        </span>
                    </div>
                    <div style="width:100%;height:0.02rem;background-color:rgba(246,246,246,1);margin-top:0.1rem;"></div>
                    <div style="text-align:center;width:100%;height:5.78rem;">
                        <img src="images/buy.png" style="width:3.9rem;height:2.18rem; display:inline-block;" class="img1" />
                        <p class="P5"><span>9</span><span>币</span></p>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="tankuang">
        <div class="tip">提示</div>
        <p>您的比邻币不足，快去签到吧！</p>
        <div class="t">
            <span class="cancel" onclick="cloose()">取消</span>
            <span class="ok" onclick="cloose()">确定</span>
        </div>
    </div>
    
    <div class="zhezhao"></div>
    <style>
        .fullScreen{
            position:fixed;
            width: 100%;
            height: 100%;
            top: 0;
            background: rgba(0,0,0,0.0);
            z-index: 1000;
          
        }
        .fullScreen img{
            margin-top: 3rem;
        }
        .swiper-container { width: 100%; height: 100%;}
    </style>
    <div class="fullScreen" >
            <div class="swiper-container">
            <div class="swiper-wrapper">
                    <!-- <div class="swiper-slide"><img src="./images/1.png" alt="" style="width:100%"/></div>
                    <div class="swiper-slide"><img src="./images/2.png" alt="" style="width:100%"/></div>
                    <div class="swiper-slide"><img src="./images/3.png" alt="" style="width:100%"/></div> -->
                </div>
            </div>
    </div>
</body>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/swiper.min.js"></script>

<!--弹窗-->
<script type="text/javascript">
    // 渲染页面
    var customer_id = localStorage.getItem("customer_id");
    var urlId = localStorage.getItem('urlId');
    console.log(urlId);
    var info = {};
    var detail_id = '';
    var address_id = getUrlParam('id');
    var full = true;
   
    $.ajax({
        url: 'http://192.168.1.44/shop/Shop/detail',
        type: "get",
        data: {
            goods_id: urlId,
            customer_id: customer_id
        },
        success: function (datas) {
            var data = JSON.parse(datas);
            console.log(data)
            var data_i = data.data.info;
            var data_img = data.data.imgs

            $('.P1').text(data_i.title);
            $('.price').text(data_i.blings);
            $('.P3 span').text(data_i.current_price);
            
            var html_3 = '';
            var num = 0;
            var html_2 = '';
                $.each(data_img, function (i, e) {
                //  1.封面图 2.轮播图 3.商品介绍图
                switch (e.type) {
                    case '1':

                        break;
                    case '2':
                        html_2 += '<div class="swiper-slide"><img src="' + e.img +
                            '" alt="" style="width:100%"/></div>';
                        num++
                        break;
                    case '3':
                        html_3 += '<img src="' + e.img + '" style="width:100%;" />';
                        break;
                }
            });
           if(data_i.stock=="0"){
            $('.submit_btn').hide();
            $('.submit_btn1').css('display','inline-block');
            
           }
           
            $('.swiper-wrapper').html(html_2);
            $('.swiper-container .item>span').eq(1).text(num);
            $('.c_body>div').html(html_3);
            if(data_i.category_id=="1"){
                var mySwiper = new Swiper('.swiper-container', {
                    autoplay: 3000,
                    preventClicksPropagation:true,
                    // speed:2000,
                    onSlideChangeEnd: function (swiper) {
                        $('.item>span').eq(0).text(swiper.activeIndex + 1)
                    },
                    onClick: function(swiper){
                        if(full){
                            $('.fullScreen').show();
                            full=false;
                        }else{
                            $('.fullScreen').hide();
                            full=true;
                        }
                    }
                })
            };
            $('.fullScreen').css('background','rgba(0,0,0,0.9)');
            $('.fullScreen').hide();
            //获取轮播图第一张
            $.each(data_img, function (i, e) {
                if (e.type == 2) {
                    $('.pan1>img').attr('src', e.img);
                    return false
                }
            })
        }
    });


    $.ajax({
        url: 'http://192.168.1.44/shop/Shop/choose',
        type: 'get',
        data: {
            goods_id: urlId,
            customer_id: customer_id
        },
        success: function (data) {
            var datas = JSON.parse(data);
            var address = datas.data.address;
            info = datas.data.info
            console.log(datas);
            //地址渲染
            var html=''
            if (address) {
                $('.address').css("display","block");
                $('.addAddress').hide();
                // 判断是否使用默认地址
                if(!address_id){
                    address_id = address.id;

                    html = '<p><span>' + address.name + '</span><span style="margin-left:0.4rem;">' +
                    address.phone + '</span></p>' +
                    '<p  style="margin-top:0.3rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-right: 0.3rem;">' +
                    '<img class="info" src="images/locat.png" />' +
                    '<span style="margin-left:0.1rem">' + address.province + '' + address.city + '' +
                    address.area + '' + address.detail + '</span>' +
                    '</p>' +
                    '<div class="arrow"><img src="./images/join.png"></div>';
                }else{
                     //使用单次保存地址
                    $.ajax({
                        url:"http://192.168.1.44/shop/Shop/addressEdit",
                        type:"get",
                        dataType:"json",
                        async:false,
                        data:{
                            id:address_id,
                            customer_id:customer_id
                        },
                        success: function (res) {
                            var address = res.data.info;
                            html = '<p><span>' + address.name + '</span><span style="margin-left:0.4rem;">' +
                            address.phone + '</span></p>' +
                            '<p  style="margin-top:0.3rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-right: 0.3rem;">' +
                            '<img class="info" src="images/locat.png" />' +
                            '<span style="margin-left:0.1rem">' + address.province + '' + address.city + '' +
                            address.area + '' + address.detail + '</span>' +
                            '</p>' +
                            '<div class="arrow"><img src="./images/join.png"></div>';
                        }
                    })
                }
                
            }
            $('.address').html(html);
            var nameHtml = '';
            var flag = 0;
            var dataI =0;
            $.each(info, function (i, e) {
                if (e.stock > 0) {
                    nameHtml += ' <span data-i=' + i + ' onclick="showSource(this);">' + e.name +
                        '</span>';
                        //默认选中
                        if(flag==0){
                            dataI=i
                            flag=1;
                        }
                } else {
                    nameHtml += ' <span data-i=' + i + ' style="color:#DEDEDE">' + e.name +
                        '</span>'
                }

            })
            $('.btn1').html(nameHtml);
            showSource($('.btn1>span').eq(dataI));
           
        }
    })
    $(".black_overlay").click(function (e) {
        $('.submit_btn').text('立即兑换');
        $('.alert_info').hide();
        $('.alert_info1').hide();
        flag = 1;
    });

    //页面滑动，头部显示
    $(window).scroll(function (event) {
        var winPos = $(window).scrollTop();
        if (winPos > 30) {
            $('.pan1').show();
            $('.swiper-container').css('margin-top', '1rem');
        } else {
            $('.pan1').hide()
            $('.swiper-container').css('margin-top', '0');
        }
    });

    var flag = 1;
    $(".submit_btn").click(function () {
        event.stopPropagation();
        if (flag == 1) {
            $(this).text('立即兑换');
            $(".alert_info").show();
            $(".alert_info1").hide();
            flag = 2;
        } else if (flag == 2) {
            $(this).text('立即支付');
            $(".alert_info1").show();
            $(".alert_info").hide();
            if($('.address').html()==''){
                window.location.href="addNewAddress.html"
            }else{
                flag=3;
            }
             
        } else if (flag == 3) {  
         
                $.ajax({
                type: 'POST',
                url: 'http://192.168.1.44/shop/Shop/getOrder',
                data:{
                    customer_id:customer_id,
                    detail_id:detail_id,
                    address_id:address_id
                },success:function(data){
                    var datas =  JSON.parse(data);
                    if(datas.code==1){
                        localStorage.setItem('orderId',datas.data.order_id);
                        window.location.href = 'OrderDetails.html?start=1';
                    }else{
                        flag=0;
                        $(".alert_info").hide();
                        $(".alert_info1").hide();
                        // $(".tankuang").css("display","block");
                        // $(".zhezhao").css("display","block");
                        alert(datas.msg);
                    }
                }
                })
                // $(location).attr("href", "OrderDetails.html");
            
        }
    });
    $(".txt1").click(function () {
        event.stopPropagation();
        $('.submit_btn').text('立即兑换');
        $(".alert_info").hide();
        $(".alert_info1").hide();
        flag = 1;
    });

    function showSource(e) {
        console.log(info)
        $.each($('.btn1 span'), function () {
            $(this).removeClass('active')
        })
        $(e).addClass('active');

        var index_n = info[$(e).attr('data-i')];
        detail_id = index_n.detail_id;
        
        $('.specifications>img').attr('src', index_n.img);
        $('.specifications .price').text(index_n.blings);
        $('.specifications .color').text(index_n.name);
        $('.specifications .stock').text(index_n.stock);
        $('.P5>span').eq(0).text(index_n.blings)
    }



    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg); //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }

    function cloose() {
        $(".tankuang").css("display","none");
        $(".zhezhao").css("display","none");
    }
</script>

<!--rem JS-->
<script type="text/javascript">
    (function (designWidth, maxWidth) {
        var doc = document,
            win = window,
            docEl = doc.documentElement,
            remStyle = document.createElement("style"),
            tid;

        function refreshRem() {
            var width = docEl.getBoundingClientRect().width;
            maxWidth = maxWidth || 540;
            width > maxWidth && (width = maxWidth);
            var rem = width * 100 / designWidth;
            remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
        }
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(remStyle);
        } else {
            var wrap = doc.createElement("div");
            wrap.appendChild(remStyle);
            doc.write(wrap.innerHTML);
            wrap = null;
        }
        refreshRem();
        win.addEventListener("resize", function () {
            clearTimeout(tid)
            tid = setTimeout(refreshRem, 300);
        }, false);
        win.addEventListener("pageshow", function (e) {
            if (e.persisted) {
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
            }
        }, false);
        if (doc.readyState === "complete") {
            doc.body.style.fontSize = "16px";
        } else {
            doc.addEventListener("DOMContentLoaded", function (e) {
                doc.body.style.fontSize = "16px";
            }, false);
        }
    })(750, 750);
</script>

</html>